<template>
    <div class="login">
        <span class="loginText">欢迎登录</span>
        <input type="text" placeholder="请输入手机号码" class="phone" v-model="phone">
        <input type="password" placeholder="请输入密码" class="password" v-model="password">
        <button class="btn" @click="Login">登录</button>
    </div>
</template>
<script>
    import {getLoginUser} from '@/request/api/home.js'
    export default{
        data(){
            return{
                phone:'',
                password:''
            }
        },
        methods:{
            Login:async function(){
                let res=await this.$store.dispatch('getLogin',{phone:this.phone,password:this.password})
                console.log(res)
                if (res.data.code==200) {//如果返回的code=200，说明登录成功，跳转到个人中心页面
                    this.$store.commit('updateIsLogin',true)
                    this.$store.commit('updateToken',res.data.token)
                    let result=await getLoginUser(res.data.account.id)
                    // console.log(result)
                    this.$store.commit('updateUser',result)
                    this.$router.push('/infoUser')
                }else{
                    alert('手机号码或者密码错误')
                    this.password=''
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .login{
        background-color:red; /* 设置背景颜色 */
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        right:0;
        .loginText{
            display: block;
            color: #fff;
            font-size: 1rem;
            margin: 1.3rem 0;
            text-align: center;
        }
        input{
            display: block;
            width: 70%;
            height: 1rem;
            margin: 1.3rem auto;
            border: none;
             //设置阴影效果
            box-shadow: 0px 0px 12px 0px #999;
            //设置border效果
            border: 1px solid #999;
        }
        .btn{
            display: block;
            width: 2rem;
            height: .7rem;
            margin: 0 auto;
            border: none;
             //设置阴影效果
            box-shadow: 0px 0px 12px 0px #999;
            //设置border效果
            border: 1px solid #999;
        }
    }
</style>